<template>
    <view class="content">
    
        <view class="title">
            输入新手机号
        </view>
        
        <view class="phone">
            <input type="text" placeholder="请输入新手机号" v-model="value"  class="phone-ipt"/>
        </view>
        
        <view class="code">
            <input class="code-ipt" v-model="code" placeholder="请输入验证码" value="" />
            <view class="code-btn" @click="getcode">
				<text v-if="status">获取验证码</text>
				<text v-if="!status">{{time}}s</text>
				
				</view>
        </view>
        
        <view class="success-btn" @click="login">完成</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                value:'',
				code:"",
				time:60,
				status:true
            }
        },
        methods: {
            getcode()
			{
				var _this=this;
				if(!this.status){
					uni.showToast({
						title:"请稍后再试",
						icon:"none"
					})
					return false;
				}
				this.$api.doRequest('post',"api/send_sms_code",{mobile:this.value}).then(res=>{
					if(res.data.code==200){
						_this.status=false;
						this.set_time();
					}
				})
			},
			set_time()
			{
				var _this=this;
				
			  var time=setInterval(function(){
					_this.time=_this.time-1
					if(_this.time==0){
						_this.status=true;
						_this.time=60;
						clearInterval(time);
					}
				},1000)
				
			},
			login()
			{
				var data={
					mobile:this.value,
					captcha:this.code
				}
				console.log(data);
				this.$api.doRequest("post","api/rebind_mobile",data).then(res=>{
					console.log(res);
					if(res.data.code==200){
                      uni.showToast({
                      	title:res.data.msg
                      })
					}
				})
			}
        }
    }
</script>

<style>
.content {
    width: 710upx;
    margin:0 auto;
}
.title {
   font-size: 40upx;
   color: #000000;
   margin-top: 40upx;
}
.phone {
    width: 710upx;
    height: 80upx;
    line-height: 80upx;
    border:1px solid #DDD;
    margin-top: 80upx;
}
.phone-ipt {
    width: 710upx;
    height: 80upx;
    line-height: 80upx;
    padding-left: 20upx;
    font-size: 28upx;
}
.code {
    width: 710upx;
    height: 80upx;
    display: flex;
    margin-top: 30upx;
}
.code-ipt {
    flex: 2.5;
    height: 80upx;
    line-height: 80upx;
    background-color: #F5F5F5;
	padding-left: 20upx;
}
.code-btn {
    flex:1;
    margin-left: 20upx;
    background-color:#007AFF;
    text-align: center;
    line-height: 80upx;
    color: #fff;
    border-radius: 10upx;
}

.success-btn {
    width: 600upx;
    height: 88upx;
    text-align: center;
    line-height: 88upx;
    color:#fff;
    margin:0 auto;
    background-image: linear-gradient(to right, #F98148 , #F64A45);
    border-radius: 44px;
    margin-top: 50upx;
}

</style>
